<template>
  <div>
    <!-- <div v-if="isMobile">
      <loginH5></loginH5>
    </div> -->
    <div>
      <div class="login-body" v-if="state == 1">
        <div class="login-card">
          <div class="text-box">
            <div class="login-title-one">手机密码登录</div>
            <div class="login-title-two">
              <a target="_blank" href="/backstage" style="color: #f95d4a">经纪人登录</a>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame.png" class="login-icon" />
              <el-input v-model="mobile" placeholder="请输入手机号码" class="login-input" style="width: 350px"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame-1.png" class="login-icon" />
              <el-input v-model="password" type="password" placeholder="请输入登录密码" class="login-input"
                style="width: 350px"></el-input>
            </div>
          </div>
          <div style="height: 25px; line-height: 25px">
            <el-checkbox v-model="checked" @change="changeCheck">记住密码</el-checkbox>
          </div>
          <div class="login-btn" @click="submitLogin()">登录</div>
          <div class="text-box">
            <div class="text-left-box" @click="forgot()">忘记密码</div>
            <div class="text-right-box" @click="reg()">立即注册</div>
          </div>
        </div>
      </div>
      <div class="login-body" v-if="state == 2">
        <div class="login-card">
          <div class="login-title">账号注册</div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/user_name.png" class="login-icon" />
              <el-input v-model="user_name" placeholder="请输入姓名" class="login-input"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/id_card.png" class="login-icon" />
              <el-input v-model="id_card" placeholder="请输入身份证" class="login-input"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame.png" class="login-icon" />
              <el-input v-model="mobile" placeholder="请输入手机号码" class="login-input"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame-1.png" class="login-icon" />
              <el-input v-model="password" placeholder="请输入登录密码" class="login-input"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame-1.png" class="login-icon" />
              <el-input v-model="code" placeholder="请输入手机验证码" class="login-input"></el-input>
            </div>
            <div class="login-form-code" @click="sendCode()">
              {{ sencond == 60 ? "获取验证码" : sencond + "S后获取" }}
            </div>
          </div>
          <div style="height: 25px; line-height: 25px">
            <el-checkbox v-model="checkedCopy">
              <span style="color: black">勾选及同意用户协议</span>
              <a href="/seller/index/userAgreement" target="_blank">《用户协议》</a>
            </el-checkbox>
          </div>
          <div class="login-btn" @click="submitReg()">立即注册</div>
          <div class="text-box">
            <div class="text-left-box" @click="forgot()">忘记密码</div>
            <div class="text-right-box" @click="login()">去登录</div>
          </div>
        </div>
      </div>
      <div class="login-body" v-if="state == 3">
        <div class="login-card">
          <div class="login-title">忘记密码</div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame.png" class="login-icon" />
              <el-input v-model="mobile" placeholder="请输入手机号码" class="login-input"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame-1.png" class="login-icon" />
              <el-input v-model="password" placeholder="请输入新密码" class="login-input"></el-input>
            </div>
          </div>
          <div class="login-form">
            <div class="login-form-content">
              <img src="@/assets/img/Frame-1.png" class="login-icon" />
              <el-input v-model="code" placeholder="请输入手机验证码" class="login-input"></el-input>
            </div>
            <div class="login-form-code" @click="sendCode()">
              {{ sencond == 60 ? "获取验证码" : sencond + "S后获取" }}
            </div>
          </div>
          <div class="login-btn" @click="submitForgot()">重置密码</div>
          <div class="text-box">
            <div class="text-left-box" @click="login()">去登陆</div>
            <div class="text-right-box" @click="reg()">立即注册</div>
          </div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import * as rrweb from "rrweb";
var arrList = [];
export default {

  data() {
    return {
      state: 1,
      mobile: "",
      password: "",
      user_name: "",
      code: "",
      sencond: 60,
      timer: "",
      no: "",
      checked: false,
      checkedCopy: false,
      isMobile: false,
      allowPrefix: ['wx', '192'],
      stopFun: () => { },
      id_card: ""
    };
  },
  beforeRouteLeave(to, from, next) {

    this.stopFun();
    arrList = [];
    next();
  },
  mounted() {

    // 域名前缀白名单判断
    // 当前允许的前缀
    this.ajaxs("index/getSellerNoList", {
      success: (res) => {
        this.allowPrefix = this.allowPrefix.concat(res.msg);
        this.checkDomain()
      },
    });
    // // 假设接口为 /api/getDomainPrefix，返回 { code: 1, data: ['xxx', 'yyy'] }
    // this.$axios && this.$axios.get && this.$axios.get('/api/getDomainPrefix').then(res => {
    //   if (res && res.data && res.data.code == 1 && Array.isArray(res.data.data)) {
    //     allowPrefix = allowPrefix.concat(res.data.data);
    //   }
    //   checkDomain();
    // }).catch(() => {
    //   checkDomain();
    // });


    this.no = this.$route.query.no;
    sessionStorage.setItem("no", this.no);
    console.log(this.no);
    console.log(33333333333);

    if (this.no) {
      this.saveNo();
    }
    this.setData();
  },
  methods: {
    //录制视频
    player() {
      console.log('开始录制');

      this.stopFun = rrweb.record({
        emit(event) {
          arrList.push(event);
        },
      });
    },
    checkDomain() {
      {
        let host = window.location.host;
        console.log(host);

        // 取主机名的第一个部分作为前缀
        let prefix = host.split('.')[0];


        if (!this.allowPrefix.includes(prefix) || this.no) {
          this.state = 4
          // 这里可以自定义提示方式
          this.toast(0, "请联系经纪人获取正确的投保链接");
          // 可选：跳转到指定页面或直接关闭页面
          // window.location.href = 'https://md.saigaocloud.com/';
        } else {
          var viewport = document.querySelector('meta[name="viewport"]');
          // 判断是否为手机环境
          this.isMobile = /Android|webOS|iPhone|iPod|BlackBerry|iPad|Windows Phone/i.test(navigator.userAgent);
          if (this.isMobile) {
            viewport.setAttribute('content', 'width=device-width,' +
              'initial-scale=1.0' +
              'user-scalable=yes,shrink-to-fit=no');
            this.$router.push('/index/login/login_h5')
          } else {
            viewport.setAttribute('content', 'width=device-width,' +
              'initial-scale=0.1,' +
              'user-scalable=yes,shrink-to-fit=no');
          }
        }
      }
    },
    changeCheck() {
      localStorage.setItem("login_check", this.checked ? 1 : 0);
      localStorage.setItem("login_username", "");
      localStorage.setItem("login_password", "");
    },
    setData() {
      this.checked = localStorage.getItem("login_check") == 1 ? true : false;
      var mobile = localStorage.getItem("login_username");
      var password = localStorage.getItem("login_password");
      console.log(localStorage.getItem("login_check"));
      console.log(mobile, password);
      var that = this;
      setTimeout(function () {
        that.mobile = mobile ? mobile : "";
        that.password = password ? password : "";
        that.$forceUpdate();
        console.log(mobile, password);
      }, 100);
    },
    forgot() {
      this.state = 3;
      this.password = "";
      this.code = "";
      this.sencond = 60;
      this.timer = "";
    },
    reg() {
      this.state = 2;
      this.password = "";
      this.code = "";
      this.sencond = 60;
      this.timer = "";
      arrList = [];
      this.player();
    },
    login() {
      this.state = 1;
      this.password = "";
      this.code = "";
      this.sencond = 60;
      this.timer = "";
      // 清空录制视频

      this.stopFun()
      arrList = [];
      console.log('结束录制');
    },
    submit() {
      if (!this.mobile) return this.toast(0, "请输入手机号码");
      if (!this.code) return this.toast(0, "请输入手机验证码");
      this.ajaxs("login/loginDo", {
        data: {
          mobile: this.mobile,
          code: this.code,
          no: this.no,
        },
        success: (res) => {
          if (res.code) {
            this.toast(1, "登录成功");
            this.$store.commit("updateMobile", res.msg);
            this.$store.commit("updateLoagin", true);
            this.$router.push({
              path: "/index/index/index",
            });
          } else {
            this.toast(res.code, res.msg);
          }
        },
      });
    },
    getUserName() {
      this.ajaxs("user/getInfo", {
        success: (res) => {
          if (res.msg.user_name) {
            this.$store.commit("updateName", res.msg.user_name);
          } else {
            this.$store.commit("updateName", "暂无用户名");
          }
        },
      });
    },
    submitLogin() {
      if (!this.mobile) return this.toast(0, "请输入手机号码");
      if (!this.password) return this.toast(0, "请输入登录密码");
      if (this.checked) {
        localStorage.setItem("login_username", this.mobile);
        localStorage.setItem("login_password", this.password);
      }
      this.ajaxs("login/pwdLogin", {
        data: {
          mobile: this.mobile,
          password: this.password,
        },
        success: (res) => {
          if (res.code) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            });
            this.$store.commit("updateMobile", res.msg);
            this.$store.commit("updateLoagin", true);
            this.getUserName();
            this.$router.push({
              path: '/index/index/index'
            });


          } else {
            return this.toast(0, res.msg);
          }
        },
      });
    },
    submitReg() {
      if(!this.id_card) return this.toast(0,'请输入身份证');
      if (!this.mobile) return this.toast(0, "请输入手机号码");
      if (!this.password) return this.toast(0, "请输入登录密码");
      if (!this.code) return this.toast(0, "请输入手机验证码");
      if (!this.checkedCopy) return this.toast(0, "请勾选用户协议");
      this.ajaxs("login/regDo", {
        data: {
          mobile: this.mobile,
          password: this.password,
          code: this.code,
          no: this.no,
          user_name: this.user_name,
          id_card: this.id_card,
          mark: arrList
        },
        success: (res) => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.login();
          }
        },
      });
    },
    submitForgot() {
      if (!this.mobile) return this.toast(0, "请输入手机号码");
      if (!this.password) return this.toast(0, "请输入新登录密码");
      if (!this.code) return this.toast(0, "请输入手机验证码");
      this.ajaxs("login/forgotDo", {
        data: {
          mobile: this.mobile,
          password: this.password,
          code: this.code,
        },
        success: (res) => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.login();
          }
        },
      });
    },
    saveNo() {
      if (!this.no) return;
      this.ajaxs("login/saveNo", {
        data: { no: this.no },
        success: (res) => {
          console.log(res.msg);
        },
      });
    },
    sendCode() {
      if (this.sencond != 60) return false;
      if (!this.mobile) return this.toast(0, "请输入手机号码");
      this.ajaxs("login/mobileDo", {
        data: {
          mobile: this.mobile,
        },
        success: (res) => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.sencond--;
            this.timer = setInterval(() => {
              if (this.sencond > 0) {
                this.sencond--;
              } else {
                this.sencond = 60;
                clearInterval(this.timer);
              }
            }, 1000);
          }
        },
      });
    },
  },

};
</script>

<style scoped>
@import "../../assets/css/login/login.css";
</style>
